@extends('home.base.base')

@section("head")
    <link rel="stylesheet" href="/public/statics/css/list.css?v=1" />
    <style>
        body{background:#f2f2f2;}
        .jf-form-control{
            width: 700px;
            border: 1px solid #999;
            height: 31px;
            border-right: 0;
            padding-top: 2px;padding-left:10px;
        }
    </style>
@endsection


@section("content")

    <div class="jf-container">

        <div class="jfn-block cls">

            <div class="jf-fl jf-w-781  jfn-article-list">

                <div class="jf-h-50 jf-relative">
                     <!--<img src="/public/statics/img/system/17.jpg"  class="jf-absolute jfs-decoration" /> -->
                </div>

                <div class="jf-search-big">
                    <input type="text" class="jf-form-control" value="{{ $keyword }}" name="keyword" id="keyword"/>
                    <button style="width: 56px;height: 37px;margin-left: -6px;background: white;border: 1px solid silver;" onclick="search();">搜索</button>
                </div>
                <script type="text/javascript">

                    function search(){
                        var keyword = document.getElementById('keyword').value;
                        var url = "http://"+window.location.hostname+'/search/'+keyword;
                        window.location.href=url;
                    }
                </script>

                @foreach($posts as $key => $val )
                    <div class="jfs-item cls ">
                        <div class="jfs-img jf-fl ">
                            <img src="{{ $val->cover }}"  style="width:257px;height:169px;" />
                        </div>
                        <div class="jfs-article jf-fl">
                            <div class="jfs-title">
                                <a  href="/post/{{$val->id}}" >{!! $val->title !!}</a>
                            </div>
                            <div class="jfs-desc">
                                {!! $val->description !!}
                            </div>
                            <div class="jfs-tag">
                                {{ $val->created_at }}
                            </div>
                        </div>
                    </div>
                @endforeach




            </div>

            <div class="jf-fr jf-w-334 ">
                <div>
                    <img src="/public/statics/img/system/18.jpg"  />
                </div>


                <div class="jf-top-list jf-mt-20">
                    <div class="jf-top-list-header">
                        <a href="#" class="jf-button">热门排行<span class="jf-play"><span class="jf-tran"></span></span></a>
                        <span class="jf-fr jf-fw"><span>周排行</span>&nbsp;|&nbsp;<span>月排行</span></span>
                    </div>
                    <ul class="jf-top-list-item-group">
                        @foreach($query->getTop() as $key => $val )
                            <li class="jf-top-list-item"><span class="jf-num">{{ $key+1 }}</span><a href="/post/{{$val->post_id}}" class="jf-post-title">{{mb_substr($val->title,0,19)}}</a></li>
                        @endforeach

                    </ul>
                </div>



                <div class="jf-mt-20">
                    <img src="/public/statics/img/system/19.jpg"  />
                </div>


                <div class="jf-mt-20">
                    <div class="jf-top-list-header">
                        <a href="#" class="jf-button">推荐阅读<span class="jf-play"><span class="jf-tran"></span></span></a>
                    </div>
                    <ul class="jf-c-2">
                        <li>
                            <img src="/public/statics/img/system/20.jpg"  />
                            <div class="jf-fs-13">编辑文本文字模板，编辑文本文，文章内容简单…</div>
                        </li>
                        <li><img src="/public/statics/img/system/20.jpg"  /><div class="jf-fs-13">编辑文本文字模板，编辑文本文，文章内容简单…</div></li>
                        <li><img src="/public/statics/img/system/20.jpg"  /><div class="jf-fs-13">编辑文本文字模板，编辑文本文，文章内容简单…</div></li>
                        <li><img src="/public/statics/img/system/20.jpg"  /><div class="jf-fs-13">编辑文本文字模板，编辑文本文，文章内容简单…</div></li>
                    </ul>
                </div>

                <div class="jf-mt-20">
                    <img src="/public/statics/img/system/21.jpg"  />
                </div>

                <div class="jf-mt-20 jfn-hot-company">
                    <div class="jf-top-list-header">
                        <a href="#" class="jf-button">热门企业<span class="jf-play"><span class="jf-tran"></span></span></a>
                    </div>
                    <ul class="jf-c-2">
                        <li><img src="/public/statics/img/system/22.jpg" /></li>
                        <li><img src="/public/statics/img/system/22.jpg" /></li>
                        <li><img src="/public/statics/img/system/22.jpg" /></li>
                        <li><img src="/public/statics/img/system/22.jpg" /></li>
                        <li><img src="/public/statics/img/system/22.jpg" /></li>
                        <li><img src="/public/statics/img/system/22.jpg" /></li>
                        <li><img src="/public/statics/img/system/22.jpg" /></li>
                        <li><img src="/public/statics/img/system/22.jpg" /></li>

                    </ul>
                </div>


            </div>
        </div>






        @include('home.base.friend')



    </div>

@endsection